<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<!-- 先引入react,再引入react-dom,因为react是核心库，react-dom是扩展库 -->
<!-- 引入以后全局多了一个REACT和ReactDOM对象 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="example"></div>
<div id="example1"></div>
<div id="example2"></div>
<!-- 此处一定要写babel，不写就是默认js -->
<script type="text/babel">

class Demo extends React.Component {
  showData = () => {
       const {input1} = this
       alert(input1.value)
  }
 
  // 意思是把当前节点放到实例自身，并给它起了一个名字叫input1
  // 箭头的左侧只有一个参数小括号可以省略，箭头右侧只有一句函数体花括号可以省略
  // <input ref={(a) => {this.input1 =a }} type="text" placeholder="点击按钮提示数据"/>&nbsp; 
  render(){
    return (
      <div>
        <input ref={(currentNode) => {this.input1 =currentNode }} type="text" placeholder="点击按钮提示数据"/>&nbsp;
        <button onClick={this.showData}>点我提示左侧的数据</button>
      </div>
    )
  }
}



ReactDOM.render(
	<Demo/>,
	document.getElementById('example')
);



function demo() {
  console.log("nihao");
}
</script>

</body>
</html>